import { View, Text, ScrollView, TouchableOpacity, Image } from 'react-native';
import { useState } from 'react';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';

// 模拟分类数据
const categories = [
  {
    id: '1',
    name: '手机数码',
    icon: 'phone-portrait',
    banner: require('../../assets/product/p1.jpg'),
    children: [
      { id: '1-1', name: '手机', image: require('../../assets/product/p1.jpg') },
      { id: '1-2', name: '耳机', image: require('../../assets/product/p2.jpg') },
      { id: '1-3', name: '平板', image: require('../../assets/product/p3.png') },
      { id: '1-4', name: '智能手表', image: require('../../assets/product/p4.png') },
      { id: '1-5', name: '充电器', image: require('../../assets/product/p1.jpg') },
      { id: '1-6', name: '手机壳', image: require('../../assets/product/p2.jpg') },
    ]
  },
  {
    id: '2',
    name: '服装',
    icon: 'shirt',
    banner: require('../../assets/product/p2.jpg'),
    children: [
      { id: '2-1', name: 'T恤', image: require('../../assets/product/p3.png') },
      { id: '2-2', name: '裤子', image: require('../../assets/product/p4.png') },
      { id: '2-3', name: '外套', image: require('../../assets/product/p1.jpg') },
      { id: '2-4', name: '裙子', image: require('../../assets/product/p2.jpg') },
    ]
  },
  {
    id: '3',
    name: '美食',
    icon: 'restaurant',
    banner: require('../../assets/product/p3.png'),
    children: [
      { id: '3-1', name: '零食', image: require('../../assets/product/p3.png') },
      { id: '3-2', name: '饮料', image: require('../../assets/product/p4.png') },
      { id: '3-3', name: '坚果', image: require('../../assets/product/p1.jpg') },
    ]
  },
  {
    id: '4',
    name: '美妆',
    icon: 'color-palette',
    banner: require('../../assets/product/p4.png'),
    children: [
      { id: '4-1', name: '护肤', image: require('../../assets/product/p2.jpg') },
      { id: '4-2', name: '彩妆', image: require('../../assets/product/p3.png') },
      { id: '4-3', name: '香水', image: require('../../assets/product/p4.png') },
    ]
  },
  {
    id: '5',
    name: '家居',
    icon: 'home',
    banner: require('../../assets/product/p1.jpg'),
    children: [
      { id: '5-1', name: '床品', image: require('../../assets/product/p1.jpg') },
      { id: '5-2', name: '家具', image: require('../../assets/product/p2.jpg') },
      { id: '5-3', name: '收纳', image: require('../../assets/product/p3.png') },
    ]
  }
];

export default function CategoryPage() {
  const insets = useSafeAreaInsets();
  const [activeCategory, setActiveCategory] = useState(categories[0]);

  return (
    <View 
      className="flex-1 bg-white"
      // style={{ paddingTop: insets.top }}
    >
      <View className="flex-1 flex-row">
        {/* 左侧主分类 */}
        <ScrollView 
          className="max-w-[70px] bg-gray-50"
          showsVerticalScrollIndicator={false}
        >
          {categories.map(category => (
            <TouchableOpacity
              key={category.id}
              className={`py-2.5 ${
                activeCategory.id === category.id
                  ? 'bg-white'
                  : ''
              }`}
              onPress={() => setActiveCategory(category)}
              activeOpacity={0.7}
            >
              <View className="items-center">
                <Ionicons 
                  name={category.icon as any} 
                  size={16} 
                  color={activeCategory.id === category.id ? '#f43f5e' : '#666'} 
                />
                <Text 
                  className={`mt-0.5 px-0.5 ${
                    activeCategory.id === category.id
                      ? 'text-red-500 font-medium'
                      : 'text-gray-500'
                  }`}
                  numberOfLines={1}
                >
                  {category.name}
                </Text>
              </View>
            </TouchableOpacity>
          ))}
        </ScrollView>

        {/* 右侧内容区 */}
        <ScrollView 
          className="flex-1"
          showsVerticalScrollIndicator={false}
        >
          {/* 分类横幅 */}
          <View className="p-2">
            <View className="w-full h-40 rounded-lg overflow-hidden">
              <Image
                source={activeCategory.banner}
                className="w-full h-full"
                resizeMode="cover"
              />
              <View className="absolute inset-0 bg-black/20 items-start justify-center px-3">
                <Text className="text-white text-sm font-medium">
                  {activeCategory.name}
                </Text>
                <Text className="text-white/80 text-[10px]">
                  {activeCategory.children.length}个子分类
                </Text>
              </View>
            </View>
          </View>

          {/* 子分类网格 */}
          <View className="px-2">
            <View className="bg-gray-50/50 rounded-lg p-2">
              <View className="flex-row flex-wrap">
                {activeCategory.children.map(subCategory => (
                  <TouchableOpacity
                    key={subCategory.id}
                    className="w-[25%] mb-3 items-center"
                    activeOpacity={0.7}
                    onPress={() => console.log('点击子分类:', subCategory.name)}
                  >
                    <View className="w-14 h-14 bg-white rounded-full overflow-hidden shadow-sm mb-1">
                      <Image
                        source={subCategory.image}
                        className="w-full h-full"
                        resizeMode="cover"
                      />
                    </View>
                    <Text className="text-[10px] text-gray-700 text-center px-1">
                      {subCategory.name}
                    </Text>
                  </TouchableOpacity>
                ))}
              </View>
            </View>
          </View>
        </ScrollView>
      </View>
    </View>
  );
}
